import React, { useState } from 'react';
import { Tabs, Card, Row, Col, Statistic, Tag } from 'antd';
import './css/CaseCenter.css';

const { TabPane } = Tabs;

const CaseCenter: React.FC = () => {
  const [activeTab, setActiveTab] = useState('support');

  return (
    <section className="page case-page">
      <div className="case-background-overlay"></div>
      <div className="page-content">
        <h2 className="case-main-title">汽车技术解决方案</h2>
        <p className="case-subtitle">创新驱动 · 专业赋能 · 品质保证</p>
        
        <Tabs 
          centered
          activeKey={activeTab}
          onChange={setActiveTab}
          className="case-tabs"
        >
          <TabPane tab="技术支持服务" key="support" className="case-tab">
            <div className="case-content-section">
              <h3 className="service-title">核心服务领域</h3>
              <Row gutter={[24, 24]} className="service-grid">
                <Col xs={24} sm={12} lg={6}>
                  <Card 
                    title="汽车电子测试" 
                    bordered={false}
                    className="service-card"
                  >
                    <p>全面覆盖AVNT、HVAC、TBOX、ADAS、BMS等核心模块测试</p>
                    <div className="card-footer">
                      <span className="learn-more">了解更多</span>
                    </div>
                  </Card>
                </Col>
                <Col xs={24} sm={12} lg={6}>
                  <Card 
                    title="汽车软件开发" 
                    bordered={false}
                    className="service-card"
                  >
                    <p>Java/Android/C#/Python全栈开发，嵌入式/算法开发专家</p>
                    <div className="card-footer">
                      <span className="learn-more">了解更多</span>
                    </div>
                  </Card>
                </Col>
                <Col xs={24} sm={12} lg={6}>
                  <Card 
                    title="汽车设计服务" 
                    bordered={false}
                    className="service-card"
                  >
                    <p>从总布置到油泥模型的全流程设计解决方案</p>
                    <div className="card-footer">
                      <span className="learn-more">了解更多</span>
                    </div>
                  </Card>
                </Col>
                <Col xs={24} sm={12} lg={6}>
                  <Card 
                    title="硬件开发" 
                    bordered={false}
                    className="service-card"
                  >
                    <p>原理图设计到EMC测试的全套硬件开发服务</p>
                    <div className="card-footer">
                      <span className="learn-more">了解更多</span>
                    </div>
                  </Card>
                </Col>
              </Row>
            </div>
          </TabPane>

          <TabPane tab="软件测试服务" key="testing" className="case-tab">
            <div className="case-content-section">
              <div className="testing-hero">
                <h3>专业测试解决方案</h3>
                <p>从零部件到整车的全周期测试服务，确保系统稳定可靠</p>
                <Row gutter={24} className="testing-stats">
                  <Col span={8}>
                    <Statistic title="测试项目" value={300} suffix="+" />
                  </Col>
                  <Col span={8}>
                    <Statistic title="问题检出率" value={99.8} suffix="%" />
                  </Col>
                  <Col span={8}>
                    <Statistic title="专业设备" value={50} suffix="+" />
                  </Col>
                </Row>
              </div>

              <Row gutter={[16, 16]} className="testing-features">
                {[
                  "座舱系统专项测试",
                  "TBOX云管端测试",
                  "OTA/RDS测试",
                  "EMC电磁兼容测试",
                  "功能安全测试",
                  "性能压力测试"
                ].map((feature, index) => (
                  <Col key={index} xs={24} sm={12} md={8}>
                    <Card className="testing-feature">
                      <p>{feature}</p>
                    </Card>
                  </Col>
                ))}
              </Row>
            </div>
          </TabPane>

          <TabPane tab="软件开发服务" key="development" className="case-tab">
            <div className="case-content-section">
              <div className="development-intro">
                <h3>定制化软件开发</h3>
                <p>从概念到落地的全流程开发服务，打造智能汽车未来</p>
              </div>

              <Row gutter={[24, 24]} className="project-showcase">
                {[
                  {
                    name: "云服务项目",
                    description: "车联网云端服务平台开发",
                    tech: ["微服务架构", "Kubernetes", "MQTT协议"]
                  },
                  {
                    name: "学习强国车载版",
                    description: "定制化车载信息娱乐应用",
                    tech: ["Android Auto", "语音交互", "内容安全"]
                  },
                  {
                    name: "车辆设置系统",
                    description: "整车参数配置管理系统",
                    tech: ["Qt框架", "CAN通信", "OTA升级"]
                  },
                  {
                    name: "MCU仪表算法",
                    description: "微控制器单元仪表开发",
                    tech: ["AutoSAR", "Matlab", "功能安全"]
                  }
                ].map((project, index) => (
                  <Col key={index} xs={24} sm={12} lg={6}>
                    <Card 
                      title={project.name} 
                      bordered={false}
                      className="project-card"
                      extra={<Tag color="green">已交付</Tag>}
                    >
                      <p>{project.description}</p>
                      <div className="tech-tags">
                        {project.tech.map((tech, i) => (
                          <Tag key={i} color="blue">{tech}</Tag>
                        ))}
                      </div>
                    </Card>
                  </Col>
                ))}
              </Row>
            </div>
          </TabPane>
        </Tabs>
      </div>
    </section>
  );
};

export default CaseCenter;